<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>全选<input type="checkbox" class="checkAll" /></div>
    <div>隆江猪脚饭<input type="checkbox" class="checkOne" /></div>
    <div>沙县小吃<input type="checkbox" class="checkOne" /></div>
    <div>螺蛳粉<input type="checkbox" class="checkOne" /></div>

    <script>
        let checkAll = document.querySelector('.checkAll');
        let checkOnes = document.querySelectorAll('.checkOne');
        console.log(checkAll, checkOnes);

        checkAll.addEventListener('click', () => {
            checkOnes.forEach((ele) => {
                ele.checked = checkAll.checked;
            })
        })

        checkOnes.forEach((ele) => {
            ele.addEventListener('click', () => {
                console.log(ele);
                if (!ele.checked) {
                    checkAll.checked = false;
                }

            })
        })
    </script>
</body>

</html>